<template>
    <div class="big-box">
        <div class="herder-box">
            <h2>资产管理</h2>
            <hr>
            <div class="header">
                <span>账户余额</span>
                <tr />
                <span>540000</span>
            </div>
        </div>
        <div class="table-box">
            <div class="tableheader">
                <span>收支明细</span>
                <el-button @click="handleExport">导出</el-button>
            </div>
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100% "  @selection-change="handleSelectionChange"
                class="table">
                <el-table-column type="selection" width="55" />
                <el-table-column label="时间" width="120">
                    <template #default="scope">
                        {{ scope.row.time }}
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="收支类型" width="120" />
                <el-table-column prop="maney" label="金额(元)" show-overflow-tooltip />
                <el-table-column prop="zhangdan" label="账单类型" show-overflow-tooltip />
                <el-table-column prop="filled" label="金额(元)" show-overflow-tooltip />
                <el-table-column prop="make" label="账单摘要" show-overflow-tooltip />
                <el-table-column prop="id" label="订单号" show-overflow-tooltip />
            </el-table>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref ,reactive} from 'vue'
import service from '@/utils/request'
//需要导出引入一下两个方法
import * as XLSX from 'xlsx'
import fs from 'file-saver'

interface bannerlist {
    "id": number,
    "img": string,
    "name": string,
    "filge": boolean,
    "add": string,
    "time": string
}
var tableData = reactive<bannerlist[]>([])
const handleSelectionChange = () => {

}


//获取信息
const bannerlist = () => {
    service({
        url: "http://localhost:3000/datatime"
    }).then(res => {
        console.log(res.data);
            tableData.length = 0
            tableData.push(...res.data)
    })
}
bannerlist()
//暂时模拟的数据
// var tableData = [
//     { name: "周杰伦", address: 1200, date: "2021-11-07" },
//     { name: "周杰伦", address: 1200, date: "2021-11-07" },
//     { name: "周杰伦", address: 1200, date: "2021-11-07" },
//     { name: "周杰伦", address: 1200, date: "2021-11-07" },
//     { name: "周杰伦", address: 1200, date: "2021-11-07" }
// ]
//导出按钮
var handleExport = () => {
    excelExport(document.querySelector('table'), 'users_export')
}
// 自动分析dom元素导出excel
var excelExport = (table: any, filename: any) => {
    // workbook,
    const wb = XLSX.utils.table_to_book(table)

    /* Export to file (start a download) */
    const defaultCellStyle = {
        font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
        fill: { fgColor: { rgb: 'FFFFAA00' } },
    }
    const wopts = {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary',
        cellStyle: true,
        defaultCellStyle: defaultCellStyle,
        showGridLines: false,
    }

    const wbout = XLSX.write(wb, wopts)
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    fs.saveAs(blob, filename + '.xlsx')
}

var s2ab = (s: any) => {
    if (typeof ArrayBuffer !== 'undefined') {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
    } else {
        const buf = new Array(s.length);
        for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
    }
}
</script>
<style scoped>
.herder-box {
    height: 150px;
    background-color: rgba(255, 255, 255, 0.307);
}

.herder-box h2 {
    padding-top: 20px;
}

.header {
    margin-top: 20px;
}

.table-box {
    margin-top: 20px;

}

.tableheader {
    display: flex;
    justify-content: space-between;
}

.table {
    margin-top: 20px;
}
.el-button{
    background-color: rgba(255, 255, 255, 0.394);
}
</style>